$baseFontSize:75;
$baseColor : #15bc84;
$deputyColor:#898989;
$disabledBaseColor:#1FC37E;
$important:linear-gradient(90deg,rgba(250,55,23,1),rgba(255,107,49,1));

@mixin remCalc($property, $values...) {
  $max: length($values);
  $remValues: '';

  @for $i from 1 through $max {
    $value: nth($values, $i);
    $remValues: #{$remValues + $value/$baseFontSize}rem;

    @if $i < $max {
      $remValues: #{$remValues + " "};
    }
  }

  #{$property}: $remValues;
}

textarea{
    resize:none;
    border:none;    
    width: 100%;
    min-height: 80px;
  }
.group{
    
    width: 100%;    
    font-size:16px;
    padding:8px 4px;
    background: #fff;
    font-family:PingFang-SC-Medium;
    font-weight:500;
    color:rgba(51,51,51,1);
}
.formitem {
    display: flex;
    justify-content: space-between;
    width: 99%;    
    font-size:16px;
    padding:8px 4px;
    background: #fff;
    font-family:PingFang-SC-Medium;
    font-weight:500;
    color:rgba(51,51,51,1);
    border-bottom: 1px solid #E6E6E6;
    &>div>input {
        border: none;
    }

    .novalue {
        color: rgba(175, 175, 175, 1);

        .add {
            display: block;
            margin: auto;
            @include remCalc(width, 40);
            @include remCalc(height, 40);
        }
    }
}

.filelist {
    width: 100%;
    display: flex;
    @include remCalc(min-height, 114);
    justify-content: space-between;

    &>div {
        display: flex;

        span {
            display: inline;
            margin: auto;
        }

        img {
            @include remCalc(width, 35);
            @include remCalc(height, 36);
            display: block;
            margin: auto;
        }
    }

    .del {
        display: block;
        margin: auto;
        @include remCalc(width, 42);
        @include remCalc(height, 44);

    }
}

.radio{
    display: flex;
}

.hidden{
    display: none;
}
textarea:focus+.costumlabel{
    display: none;
}

.rodal{
    width: 90vw;
    height: 80vw;
}
.title{
    display: flex;
    width: 100%;
    justify-content: space-between;
}
.rolelist{
    display: flex;
    width:100%;
    .singlerole{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        position: relative;
        width: 3.86667rem;
        p{
            display: block;
            @include remCalc(font-size,26);
            color: #333;
            width: 100%;
            text-align: center;
        }
        .head{
            @include remCalc(width,160);
            @include remCalc(height, 160);
            margin: auto;
        }
        .del{
            @include remCalc(height, 40);
            @include remCalc(width, 40);
            position: absolute;
            @include remCalc(top, 5);
            @include remCalc(right, 24);
            display: block; 
        }
    }
    .addbotton{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 3.86667rem;
        p{
            display: block;
            @include remCalc(font-size,26);
            color: #AFAFAF;
            width: 100%;
            text-align: center;
        }
        img{
            @include remCalc(width,160);
            @include remCalc(height,160);
            margin: auto;
        }
    }
}
